import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Alert, Button, Card, Checkbox, Col, Form, Input, InputNumber, message, Modal, Radio, Row, Select } from 'antd';
import { useEffect, useState } from 'react';
import { setting, update, getData, upPredict, clearData } from './service';
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 12 },
};

const tailLayout = {
  wrapperCol: { offset: 4, span: 12 },
};
let timer: any;
export default ()=>{
  const [form] = Form.useForm();
  const [dataSource,setDataSource] = useState<Record<string, any>[]>([]);

  const loadData = ()=>{
    clearInterval(timer);
    timer = setInterval(()=>{
      getData({}).then(result=>{
        setDataSource(()=>result.data);
      })
    },1000)
  }

  useEffect(() => {
    loadData();
    setting({
    }).then(result=>form.setFieldsValue(result.data || {}));
  }, []);

  const onFinish = (values: any) => {
    update(values).then(result=>{
      message.success(result.msg).then();
      setting({

      }).then(result=>form.setFieldsValue(result.data || {}));
    });
  };
  return (
    <PageContainer>
      <Card>
        <Form form={form} {...layout} onFinish={onFinish}>
          <Form.Item>
            <Button type='primary' danger onClick={()=>{
              Modal.confirm({
                title:'提醒',
                content:'您正在清理采集数据',
                onOk:()=>{
                  clearData({

                  }).then(result=>{
                    window.location.reload();
                  })
                }
              })
            }}>清理数据</Button>
          </Form.Item>
          <Form.Item name='remainCount' label="剩余解析次数" extra='次数少于2000时，请充值' status='error'>
            <Input readOnly title='次数少于2000时，请充值' />
          </Form.Item>
          <Form.Item label="是否开始采集" valuePropName='checked' name='openParse'>
            <Checkbox>是</Checkbox>
          </Form.Item>
          <Form.Item label="开启抢包" valuePropName='checked' name='isRob'>
            <Checkbox>是</Checkbox>
          </Form.Item>
          <Form.Item label="往期期数" name='predictCount'>
            <InputNumber min={1} step={1} precision={0} />
          </Form.Item>
          <Form.Item label="预测规则" name='predictType'>
            <Radio.Group onChange={e=>{
              console.log(e.target.value);
              Modal.confirm({
                title:'重新预测',
                content:'下期将按照新规则预测',
                onOk: ()=>{
                  upPredict({
                    type:e.target.value,
                  }).then(()=>{
                    message.success('下期生效');
                  })
                }
              })
            }}>
              <Radio value="1">序号最小</Radio>
              <Radio value="2">序号最大</Radio>
              <Radio value="3">概率最小</Radio>
              <Radio value="4">概率最大</Radio>
              <Radio value="5">随机取一个</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
           <ProTable
             search={false}
             options={false}
             bordered
             pagination={false}
             dataSource={dataSource}
             size="small"
              columns={[
                {
                  title: '期数',
                  dataIndex: 'sn',
                  width:80,
                },
                {
                  title: '数量',
                  dataIndex: 'redPackageCount',
                  width:50,
                },
                {
                  title: '金额',
                  dataIndex: 'amount',
                  width:60,
                },
                {
                  title: '序号',
                  dataIndex: 'predictIndex',
                  width:60,
                },
                {
                  title: '等待',
                  dataIndex: 'predictSeconds',
                  width:60,
                },
              ]}
           />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  )
}
